<template>
  <div class="userData-container">
    <!-- 导航栏区域 -->
    <van-nav-bar title="标题">
      <!-- 左侧的返回按钮 -->
      <van-icon
        slot="left"
        name="arrow-left"
        @click="$router.back()"
      />
    </van-nav-bar>
    <!-- 主体部分 -->
    <!-- 修改头像的隐藏域,点击头像后,自动触发点击事件 -->
    <input
      type="file"
      hidden
      ref="editUserPhotoRef"
      @change="onChange"
    >
    <!-- ------------------------- -->
    <van-cell
      title="头像"
      value="内容"
      is-link
      @click="$refs.editUserPhotoRef.click()"
    >
      <van-image
        class="avatar"
        fit="cover"
        :src="userInfo.photo"
      />
    </van-cell>
    <van-cell
      title="昵称"
      :value="userInfo.name"
      is-link
      @click="editUserName"
    />
    <van-cell
      title="性别"
      :value="userInfo.gender===1? '女':'男'"
      is-link
      @click="isEditUserSexShow=true"
    />
    <van-cell
      title="生日"
      :value="userInfo.birthday"
      is-link
      @click="isEditUserBornShow=true"
    />
    <!-- 修改昵称的弹层处理 -->
    <van-popup
      v-model="isEditUserNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <edit-user-name
        v-if="isEditUserNameShow"
        @closed="isEditUserNameShow=false"
        v-model="userInfo.name"
      ></edit-user-name>
    </van-popup>
    <!-- 修改性别的弹层1 -->
    <van-popup
      v-model="isEditUserSexShow"
      position="bottom"
    >
      <edit-user-sex
        v-if="isEditUserSexShow"
        @closed="isEditUserSexShow=false"
        v-model="userInfo.gender"
      ></edit-user-sex>
    </van-popup>
    <!-- 修改生日的弹层 -->
    <van-popup
      v-model="isEditUserBornShow"
      position="bottom"
    >
      <edit-born
        v-if="isEditUserBornShow"
        @closed="isEditUserBornShow=false"
        v-model="userInfo.birthday"
      ></edit-born>
    </van-popup>
    <!-- 修改头像的弹出层 -->
    <van-popup
      v-model="isEditUserPhotoShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <edit-user-photo
        v-if="isEditUserPhotoShow"
        :img="avatar"
        @closed="isEditUserPhotoShow=false"
        @upddtePhoto="userInfo.photo=$event"
      ></edit-user-photo>
    </van-popup>
  </div>
</template>

<script>
// 导入获取用户信息的接口模块
import { getUserData } from '../../api/user.js'
// 导入修改用户昵称的组件
import editUserName from './componments/editUserName.vue'
// 导入修改用户性别的模块
import editUserSex from './componments/editUserSex.vue'
// 导入修改生日的模块
import editBorn from './componments/editBorn.vue'
// 导入修改头像的模块
import editUserPhoto from './componments/editUserPhoto.vue'
export default {
  // 组件名称
  name: 'userData',
  // 局部注册的组件
  components: {
    editUserName,
    editUserSex,
    editBorn,
    editUserPhoto
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      // 用户资料的数据源
      userInfo: {},
      // 控制修改昵称弹层的显示与隐藏
      isEditUserNameShow: false,
      // 控制修改性别弹出层的显示与隐藏
      isEditUserSexShow: false,
      // 控制修改生日弹出层的显示与隐藏
      isEditUserBornShow: false,
      // 控制修改头像弹出层的显示与隐藏
      isEditUserPhotoShow: false,
      avatar: ''

    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    // 页面加载调用
    this.loadUserData()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 定义获取用户信息的函数
    async loadUserData () {
      // 调接口
      try {
        const { data } = await getUserData()
        console.log(data)
        // 完成赋值的操作
        this.userInfo = data.data
      } catch (error) {
        this.$toast('获取失败!', error)
      }
    },
    // 点击修改用户昵称的相关处理函数
    editUserName () {
      //  显示弹出层
      this.isEditUserNameShow = true
    },
    // 文件选择框改变时触发
    onChange () {
      // 拿到改变选中的文件
      const file = this.$refs.editUserPhotoRef.files[0]
      // 基于文章对象获取 blob 数据
      const blob = window.URL.createObjectURL(file)
      console.log(blob)
      this.avatar = blob
      // 弹出修改头像的弹出框
      this.isEditUserPhotoShow = true
      // 每次弹出后,把文件输入框的内容清空
      this.$refs.editUserPhotoRef.value = ''
    }
  }
}
</script>

<style scoped lang="less">
// 头像图片的相关样式
.avatar {
  width: 60px;
  height: 60px;
}
.van-popup {
  background: #f5f7f9;
}
</style>
